<template>
  <div class="modal_choose_official">
    <div class="choose_official_wrap">
      <van-form ref="chooseOfficialForm" label-width="85px" :scroll-to-error="true">
        <!-- 角色类型 -->
        <van-field readonly clickable name="picker" :value="vo.registerTagTypeName" label="角色类型" :rules="rules.registerTagTypeCode" placeholder="请选择角色类型" @click="showRoleTypePicker = true" />
        <van-popup v-model="showRoleTypePicker" position="bottom">
          <van-picker show-toolbar :columns="roleType" value-key="value" @confirm="onConfirmRoleTypePicke" @cancel="showRoleTypePicker = false" />
        </van-popup>
        <!-- 姓名 -->
        <van-field v-model.trim="vo.name" label="姓名" placeholder="请输入姓名" :rules="rules.name" />
        <!-- 证件类型 -->
        <van-field readonly clickable name="picker" :value="vo.idCardTypeName" label="证件类型" :rules="rules.idCardTypeCode" placeholder="请选择证件类型" @click="showCardTypePicker = true" />
        <van-popup v-model="showCardTypePicker" position="bottom">
          <van-picker show-toolbar :columns="dict.idCardType" value-key="value" @confirm="onConfirmCardTypePicke" @cancel="showCardTypePicker = false" />
        </van-popup>
        <!-- 证件号码 -->
        <van-field v-model.trim="vo.idCardNumber" label="证件号码" placeholder="请输入证件号码" :rules="vo.idCardTypeCode === 'IdCard' ? formRules.idCard : formRules.unIdCard" />
      </van-form>
    </div>

    <!-- <van-button :loading="chooseOfficialLoading" type="info" block @click="submitSelectTable">{{ $t('button.submit') }}</van-button> -->
  </div>
</template>

<script>
import validator from '@/lib/validate/mobile/validator';
import { ChooseOfficial_Rules } from '@/lib/validate/mobile/enter';

export default {
  props: {
    // 字典信息
    dict: {
      type: Object,
      default () {
        return {};
      }
    },
    chooseOfficialLoading: {
      type: Boolean,
      default: false
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      vo: {
        registerTagTypeCode: '',
        registerTagTypeName: '',
        idCardTypeCode: '',
        idCardTypeName: '',
        name: '',
        idCardNumber: ''
      },
      showCardTypePicker: false, // 是否显示证件类型选择器
      showRoleTypePicker: false, // 是否显示角色类型选择器
      rules: new ChooseOfficial_Rules(),
      roleMap: {
        'Coach': '教练',
        'Leader': '领队'
      },
      formRules: {
        idCard: [
          {
            ...validator.required('请填写证件号码'),
            validator: validator.checkIdNumber,
            trigger: 'onBlur'
          }
        ],
        unIdCard: [
          validator.required('请填写证件号码')
        ]
      }
    };
  },
  computed: {
    roleType() {
      return this.dict.registerTagType.filter(item => item.code in this.roleMap);
    }
  },
  watch: {
    isShow (val) {
      if (!val) {
        this.vo = {
          registerTagTypeCode: '',
          registerTagTypeName: '',
          idCardTypeCode: '',
          idCardTypeName: '',
          name: '',
          idCardNumber: ''
        };
        this.$refs.chooseOfficialForm.resetValidation();
      }
    }
  },
  methods: {
    // 确认选择证件类型
    onConfirmCardTypePicke (data) {
      this.vo.idCardTypeName = data.value;
      this.vo.idCardTypeCode = data.code;
      this.showCardTypePicker = false;
    },
    // 确认选择角色类型
    onConfirmRoleTypePicke (data) {
      this.vo.registerTagTypeName = data.value;
      this.vo.registerTagTypeCode = data.code;
      this.showRoleTypePicker = false;
    },
    submitSelectTable () {
      this.$refs.chooseOfficialForm.validate()
        .then(
          res => {
            const _vo = Object.assign({}, this.vo);
            _vo.registerTagTypeName = this.roleMap[_vo.registerTagTypeCode];
            this.$emit('onSubmitChooseOfficial', _vo);
          }
        )
        .catch(
          error => {
            console.log('submitSelectTable -> error', error);
          }
        );
    }
  }
};
</script>

<style scoped>
.modal_choose_official {
  padding: 10px;
}

.choose_official_wrap {
  padding-bottom: 40px;
}
</style>
